<div class="container">
  <label>
    <input name="list" type="radio" />
    <span>
      <p class="a">Yes</p>
      <p class="b">No</p>
    </span>
    Easy
  </label>
  <label>
    <input checked="" name="list" type="radio" />
    <span>
      <p class="a">Yes</p>
      <p class="b">No</p>
    </span>
    Normal
  </label>
  <label>
    <input name="list" type="radio" />
    <span>
      <p class="a">Yes</p>
      <p class="b">No</p>
    </span>
    Hard
  </label>
</div>

<style>
/* From Uiverse.io by javierBarroso  - Tags: animation, 3d, button, modern, radio, toggle */
.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.container label {
  transform-style: preserve-3d;
  perspective: 100px;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 18px;
  cursor: pointer;
}
.container label span {
  position: relative;
  margin-right: 0px;
  width: 60px;
  height: 40px;
  transform: rotateY(180deg);
  transition-duration: 0.6s;
  margin: 0 10px 0 10px;
  transform-style: preserve-3d;
  perspective: 100px;
  padding: 0px;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background: #111;
  border-radius: 50px;
  cursor: pointer;
  box-shadow:
    inset 2px 2px 2px #fff9,
    5px 5px 5px #2225;
}
.container label span p {
  position: absolute;
  transform-origin: 50% 50%;
  left: 0%;
  right: 0%;
  transform: translateX(50px) translateY(50px);
  font-weight: 600;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  font-size: 12px;
  text-shadow: 0 0 2px;
}
.container label span .a {
  backface-visibility: visible;
  color: green;
  transform: translateX(0%) translateY(0%) translateZ(10px) rotateY(0deg);
}
.container label span .b {
  backface-visibility: visible;
  color: red;
  transform: translateX(0%) translateY(0%) translateZ(-10px) rotateY(180deg);
}

.container label input[type="radio"] {
  appearance: none;
}

.container label input[type="radio"]:checked ~ span {
  box-shadow:
    inset -2px 2px 2px #fff9,
    -5px 5px 5px #2225;
  transform: rotateY(0deg);
}

</style>
    